<template>
	<div>
		<div class="check">
			<div class="checktop">
				<div class="checkqc">
					<p>您选择的航班信息如下：</p>
					<el-table :data="aircraftInfo">
						<el-table-column
							prop="aircraftSequence"
							label="飞机序列号"
						/>
						<el-table-column label="航班详情">
							<template slot-scope="scope">
								<el-popover
									placement="right"
									trigger="click"
								>
									<el-timeline>
										<el-timeline-item>
											<el-card>
												<h4>
													出发地：{{scope.row.startCity+":"+scope.row.startAirport}}
												</h4>
												<h5>
													出发时间：{{scope.row.startTime}}
												</h5>
											</el-card>
										</el-timeline-item>
										<el-timeline-item>
											<el-card>
												<h4>
													到达地：{{scope.row.reachCity+":"+scope.row.reachAirport}}
												</h4>
												<h5>
													到达时间：{{scope.row.reachTime}}
												</h5>
											</el-card>
										</el-timeline-item>
									</el-timeline>
									<el-button slot="reference">查看详情</el-button>
								</el-popover>
							</template>
						</el-table-column>
						<el-table-column
							prop="economyClassPrice"
							label="经济舱价格"
						/>
						<el-table-column
							prop="businessClassPrice"
							label="头等舱价格"
						/>
						<el-table-column
							prop="ticketsNum"
							label="机票数量"
						/>

					</el-table>
				</div>
			</div>
			<div class="lkcc">
				<div class="lkxx">
					<el-form
						:model="userInfo"
						:rules="checkUserInfo"
						ref="ruleForm"
						label-width="100px"
						inline
						class="demo-ruleForm"
					>
						<el-form-item
							label="姓名"
							prop="userName"
						>
							<el-input v-model="userInfo.userName"></el-input>
						</el-form-item>
						<el-form-item
							label="联系电话"
							prop="userPhone"
						>
							<el-input v-model="userInfo.userPhone"></el-input>
						</el-form-item>
						<el-form-item
							label="性别"
							prop="userSex"
						>
							<el-select
								v-model="userInfo.userSex"
								placeholder="请选择性别"
							>
								<el-option
									label="男"
									value="男"
								></el-option>
								<el-option
									label="女"
									value="女"
								></el-option>
							</el-select>
						</el-form-item>

						<el-form-item
							label="证件号码"
							prop="userCard"
						>
							<el-input v-model="userInfo.userCard"></el-input>
						</el-form-item>
						<el-button
							plain	
							type="success"
							@click="addUserInfo(flightRecords.flightId)"
							style="margin-left: 800px;"
						>立即预订</el-button>
					</el-form>

				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: ['list'],
		data() {
			return {
				userInfo: {
					userId: '',
					userName: '',
					userPhone: '',
					userSex: '',
					cersId: '',
					userCard: '',
				},
				aircraftInfo: this.list,
				ishow: false,
				//飞机详情数组
				flightRecords: [
					{}
				],
				checkUserInfo: {
					userName: [
						{ required: true, message: "请输入姓名", trigger: "blur" },
						{ min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
					],
					userPhone: [
						{ required: true, message: "请输入联系电话", trigger: "blur" },
						{ max: 11, message: "联系电话必须为11位", trigger: "blur" },
					],
					userSex: [
						{ required: true, message: "请选择性别", trigger: "change" },
					],
					cersId: [
						{ required: true, message: "请选择性别", trigger: "change" },
					],
					userCard: [
						{ required: true, message: "请输入身份证号", trigger: "blur" }
					],
				},
			};
		},
		// created() {
		// 	this.findFlightRecordsByIdFlightRecords();
		// },
		methods: {
			// next() {
			// 	this.ishow = !this.ishow;
			// },
			// nextstep() {

			// },
			// prevstep() {
			// 	this.$emit("prevstep");
			// },
			// changedate(param) {
			// 	this.$emit("changedate", { step: 3, data: param });
			// },
			// findFlightRecordsByIdFlightRecords() {
			// 	this.$http.get("http://localhost:1234/records/findFlightRecordsByIdFlightRecords?flightId=" + this.tempdate2.flightId).then(res => {
			// 		this.flightRecords = res.data.frs;
			// 	})
			// },
			// addUserInfo(flightId) {
			// 	this.$http.post("http://localhost:1234/userInfo/addUserInfo", this.userInfo).then(res => {
			// 		if (res.data.status) {
			// 			this.$message({
			// 				message: res.data.msg,
			// 				type: 'success'
			// 			})
			// 			this.userInfo = "";
			// 			var param = { flightId: flightId };
			// 			this.$emit("nextstep");
			// 			this.changedate(param);
			// 		}
			// 	});
			// 	let operateUsers = null;
			// 	var strcookie = document.cookie;//获取cookie字符串
			// 	var arrcookie = strcookie.split("; ");//分割
			// 	//遍历匹配
			// 	for (var i = 0; i < arrcookie.length; i++) {
			// 		var arr = arrcookie[i].split("=");
			// 		if (arr[0] == 'operateUsers') {
			// 			operateUsers = JSON.parse(arr[1]);
			// 		}
			// 	}
			// 	console.log(operateUsers)
			// 	this.$http.post("http://localhost:1234/ticketDetails/addTicketDetails?flightId=" + this.tempdate2.flightId + "&cabinsId=" + this.flightRecords.cabinsId + "&airlinesId=" + this.flightRecords.airlinesId + "&operateId=" + operateUsers.operateId).then(res => {

			// 	});
		},
		created() {
			this.$forceUpdate();
			let list = sessionStorage.getItem("list");
			console.log("list", list);
			// console.log(this.aircraftInfo);
		}
	}


</script>

<style scoped>
	.check {
		width: 1022px;
	}

	.checktop {
		display: flex;
		justify-content: space-between;
	}

	.checkqc {
		width: 78%;
	}

	.checkqc p {
		background: #ccc;
		padding: 20px;
	}

	.pricenote {
		width: 20%;
		position: relative;
	}

	.pricenote-node {
		background: rgb(64, 158, 255);
		padding: 13px;
		color: #fff;
		font-size: 18px;
		font-weight: 100;
	}

	.pricenotejt {
		width: 100%;
		border: 1px #ccc solid;
		position: absolute;
		background: #fff;
	}

	.pricenotejt .next {
		display: inline-block;
		height: 14px;
		width: 14px;
		cursor: pointer;
		background: url("../assets/air_images/map-bg.png") top right no-repeat;
	}

	.pricenotejt div:nth-of-type(1) {
		display: flex;
		justify-content: space-between;
		position: relative;
	}

	.pricenotejt div:nth-of-type(2) {
		font-size: 12px;
		color: #ccc;
		margin-top: 10px;
	}

	.lkcc {
		width: 78%;
	}

	.lkxx {
		width: 100%;
		margin: 20px 0;
		border: 1px #ccc solid;
	}

	.hongbao {
		display: flex;
		justify-content: space-between;
		border: 1px #ccc solid;
		padding: 4px;
		align-items: center;
	}

	.yyhd {
		width: 100%;
		border: 1px #ccc solid;
		margin: 20px 0;
	}

	.yyhd > p {
		background: #ccc;
		padding: 10px;
	}

	.yyhd .tips {
		background-color: #ffefef;
		margin-top: 30px;
	}

	.pot {
		position: relative;
		margin-bottom: 80px;
	}

	.yuding {
		position: absolute;
		padding: 10px 20px;
		border-radius: 2px;
		right: -100px;
		bottom: -60px;
	}
</style>
